<template>
  <div>
    <tapNav titleText="我的跟帖"></tapNav>
    <!-- 跟帖内容 -->
    <div class="myfollow" v-for="item in myfollowList" :key="item.id">
      <!-- 日期 -->
      <div class="date">
        {{item.create_date.split('T')[0]}}
        <span>{{item.create_date.split('T')[1].split('.')[0].toString().substring(8,3)}}</span>
      </div>
      <!-- 中间回帖人 -->
      <div class="info" v-if="item.parent">
        <div class="nickname">回复：{{item.parent.user.nickname}}</div>
        <div class="contentb">{{item.parent.content}}</div>
      </div>
      <div class="content">{{item.content}}</div>
      <div class="jiantou">
        <div class="original">原 文：{{item.post.title}}</div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>

    <!-- 更多跟帖 -->
    <div class="more">
      <div class="content">更多跟帖</div>
      <span class="iconfont iconjiantou1"></span>
      <span class="iconfont iconjiantou1"></span>
    </div>
  </div>
</template>

<script>
//引入头部组件
import tapNav from "@/components/topNav";
export default {
  //注册组件
  components: {
    tapNav
  },
  //数据
  data() {
    return {
      myfollowList: []
    };
  },
  created() {
    this.$axios({
      url: "/user_comments"
    }).then(res => {
      console.log(res.data);
      //存储数据
      this.myfollowList = res.data.data;
    });
  }
};
</script>

<style lang="less" scoped>
//跟帖容器
.myfollow {
  padding: 5.556vw;
  border-bottom: 1px solid #aaa;
  //日期
  .date {
    font-size: 3.889vw;
    color: #999;
    margin-bottom: 2.778vw;
    span {
      padding-left: 2.778vw;
    }
  }
  //回帖
  .info {
    background: #e4e4e4;
    padding: 0vw 4.444vw;
    font-size: 3.889vw;
    color: #888;
    margin-bottom: 2.778vw;
    //昵称
    .nickname {
      padding: 2.778vw 0;
    }
    //回帖内容
    .contentb {
      padding-bottom: 2.778vw;
    }
  }
  //内容
  .content {
    font-size: 5vw;
    margin-bottom: 2.778vw;
  }
  //右箭头
  .jiantou {
    display: flex;
    align-items: center;
    //原文
    .original {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 3.889vw;
      color: #777;
    }
    span {
      margin-top: 0.833vw;
    }
  }
}
//更多跟帖
.more {
  margin: 12.778vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888;

  .content {
    margin-right: 5.556vw;
  }
  span {
    padding-top: 1.111vw;
  }
}
</style>